<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
      + path + "/";
%>
<head>
<base href="<%=basePath%>">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=no">
  <title>支付凭证</title>
  <script src="static/js/lib/cssrem.js"></script>
<link href="static/css/style.css" rel="stylesheet"></head>

<body>
  <div class="content">
    <div class="wrapper">
    <form action="<%=basePath%>wap/transaction/proof" name="proofForm" id="proofForm" method="post" enctype="multipart/form-data">
    <c:if test="${id != null}">
      <input type="hidden" name="transactionId" id="transactionId" value="${id }"/>
    </c:if>
      <dl class="proof-form mt20 bgwh pl20 ui-1px ge">
        <dt class="proof-form f30 g6 pt20 pb20">打款金额：</dt>
        <dd class="proof-form__money pt20 pb20 cell rel">
          <div class="cell__hd rmb g3">¥</div>
          <div class="cell__bd pl20 pr20"><input class="input__style f40 g3" id="price" type="tel" name="price" data-max="${tf.totalPrice }" data-decimal="2" placeholder=""></div>
        </dd>
        <dd class="proof-form__tips f24 g9">(待付金额：¥${tf.totalPrice }，请认真核对后，输入本次打款金额）</dd>
      </dl>
      <div class="cell mt20 pt20 pb20 ui-1px ge bgwh">
        <div class="cell__hd f30 g6 rel"><label for="bankWater">银行流水:</label></div>
        <div class="cell__bd pl20 pr20 ml20 rel"><input class="input__style f30 g3" id="bankWater" name="bankFlow" type="tel" data-digit="9" placeholder="输入银行流水号码"></div>
      </div>
      <div class="bgwh pt20 pb20 mt20 ui-1px ge pl20">
        <p><span class="g6 f30">上传凭证:</span><span class="f20 dib vm g9 pl20">(仅能上传一张图片)</span> </p>
        <div class="update-photo"><input name="instrumen" id="updatePhoto" type="file" accept="image/gif,image/jpeg,image/jpg,image/png">
          <div class="photoShow"><img alt=""><label class="update-photo__btn dib" for="updatePhoto"></label></div>
        </div>
      </div>
      <div class="mt20 mb20 pt20 pb20"></div>
      <div class="mt20 mb20 pt20 pb20"></div>
      <div class="m20"> <a class="btn btn__primary tc white f34 db ml10 mr10" href="javascript:;" onclick="save()">确认提交</a> </div>
    </div>
  </div>
  </from>
<script type="text/javascript" src="static/js/lib/vendor.js"></script>
<script type="text/javascript" src="static/js/lib/app.js"></script>
<script type="text/javascript" src="static/js/lib/layer_mobile/layer.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script type="text/javascript">
function save(){
	var price = document.getElementById('price').value;
	var bankFlow = document.getElementById('bankWater').value;
	var instrumen = document.getElementById('updatePhoto').value;
	var transactionId = document.getElementById('transactionId').value;
	if(price.length <=0){
		 layer.open({
			 content:'请输入打款金额',
			 time: 2
	      }); 
		return false;
	}
	if(bankFlow.length <=0){
		 layer.open({
			 content:'请输入银行流水',
			 time: 2
	      }); 
		return false;
	}
	if(instrumen.length <=0){
		 layer.open({
			 content:'请上传支付凭证',
			 time: 2
	      }); 
		return false;
	}
	var formId = document.querySelector('#proofForm')
	var formData = new FormData(formId);
	 axios({
         method: 'post',
         url: '<%=basePath%>wap/transaction/proof',
         data:formData
       }).then(function (res) {
    	   console.log(res)
      	var state=res.data.state;
      	if(state =='00'){
      		return tipsErr('支付失败！');
    	}
    	if(state =='01'){
      		return tipsErr('此单已支付！');
    	}
    	if(state =='02'){
    		return tipsErr('支付金额过多,请重新支付！');
    	}
    	if(state =='03'){
    		history.back()
    		//location.replace(document.referrer);
    	}
    	
    	if(state =='04'){
    		tipsErr('您没有权限！')
    	}
       }).catch(function (err) {
         // 获取数据失败
         console.error(err);
         layer.closeAll()
		  //信息框
		  layer.open({
		    content: '支付失败!',
		    btn: '关闭',
		    yes: function(index){
		    	layer.close(index);
		    }  
		  });
       });
	 function tipsErr(text){
		 layer.closeAll()
		  //信息框
		  layer.open({
		    content: text,
		    btn: '确定',
		    yes: function(index){
		    	layer.close(index);
		    	history.back();
		    	//location.replace(document.referrer);
		    }  
		  });
	 }
	 layer.open({type: 2,shadeClose:false});
}

</script>
</body>
</html>
